import ReactDOM from "react-dom";
import React, { Component } from "react";

import CommentInput from "./components/CommentInput";
import CommentHead from "./components/CommentHead";
import CommentList from "./components/CommentList";

import "./index.css";

class App extends Component {
  // 准备状态数据
  state = {
    // 用户信息
    user: {
      name: "清风徐来",
      avatar: "https://static.youku.com/lvip/img/avatar/310/6.png",
      vip: true,
    },
    // 评论列表
    comments: [
      {
        id: 100,
        name: "__RichMan",
        avatar: "https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6",
        content:
          "这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集...锁了🔒",
        time: new Date("2021/10/12 10:10:23"),
        vip: true,
        collect: false,
      },
      {
        id: 101,
        name: "糖蜜甜筒颖",
        avatar:
          "https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg",
        content:
          "突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程",
        time: new Date("2021/09/23 15:12:44"),
        vip: false,
        collect: true,
      },
      {
        id: 102,
        name: "清风徐来",
        avatar: "https://static.youku.com/lvip/img/avatar/310/6.png",
        content:
          "第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有",
        time: new Date("2021/07/01 00:30:51"),
        vip: true,
        collect: false,
      },
    ],
    // 约定：default 默认排序  time 时间排序
    active: "default",
  };

  // 改变排序
  setActive = (newActive) => {
    if (newActive !== this.state.active) {
      this.setState({
        active: newActive,
      });
    }
  };

  // 添加评论
  addComment = (content) => {
    // 1. 准备评论对象
    const id = Math.max(...this.state.comments.map((item) => item.id)) + 1;
    const newComment = {
      id,
      ...this.state.user,
      content,
      time: new Date(),
      collect: false,
    };
    // 2. 追加到comments
    this.setState({
      comments: [...this.state.comments, newComment],
    });
  };

  // 删除评论
  delComment = (id) => {
    this.setState({
      comments: this.state.comments.filter((item) => item.id !== id),
    });
  };

  // 收藏评论 & 取消收藏
  collectComment = (id) => {
    this.setState({
      comments: this.state.comments.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            collect: !item.collect,
          };
        } else {
          return item;
        }
      }),
    });
  };

  render() {
    return (
      <div className="comments">
        {/* 输入组件 */}
        <CommentInput addComment={this.addComment} />
        {/* 头部组件 */}
        <CommentHead
          comments={this.state.comments}
          active={this.state.active}
          setActive={this.setActive}
        />
        {/* 列表组件 */}
        <CommentList
          delComment={this.delComment}
          collectComment={this.collectComment}
          comments={this.state.comments}
          user={this.state.user}
          active={this.state.active}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
